<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>

        /* 
            浏览器在加载一个页面时，时按照自上向下的顺序加载的
            读取到一行就运行一行，如果将script标签写到页面的上面
            代码执行时，页面还没有加载,页面没有加载DOM对象也没有加载
            会导致无法获取到DOM对象
        */

        /* 
            onload事件会在整个页面加载完成之后才触发
            为window绑定一个onload事件
            国赛世家对应的响应函数会在页面加载完成后执行
            这样可以确保我们的代码执行时所有的dom对象已经加载完毕了
        */

        window.onload=function(){
            //获取id 为btn的按钮
       var btn=document.getElementById("btn");
       //为按钮绑定一个单击响应函数
       btn.onclick=function(){
           alert("hello");
            };
        };
       
    </script>
</head>
<body>
    <button id="btn">点我一下</button>
    <!-- <script>

        /* 
            浏览器在加载一个页面时，时按照自上向下的顺序加载的
            读取到一行就运行一行，如果将script标签写到页面的上面
            代码执行时，页面还没有加载
        */
       //获取id 为btn的按钮
       var btn=document.getElementById("btn");
       //为按钮绑定一个单击响应函数
       btn.onclick=function(){
           alert("hello");

       };
    </script> -->
</body>
</html>